<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
  import Qs from 'qs';

  export default {
    //单页面中不支持前面的data:{}方式
    name: 'MyLogin',
    data() {
      //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
      return{
        user: {
          username:'',
          password:'',
        },
      }
    },
    methods:{
      // doLogin(){//一点击登录按钮，这个方法就会执行
      //   alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      // }
      doLogin: function () { // 成功后的回调
        this.$axios.get('/insert', {
          params: {
            username: this.user.username,
            password: this.user.password
          }
        }).then(response => {
          if (response.data == "1") {
            alert("登陆成功");
            this.$router.replace('/HelloWorld');
          } else if (response.data == "2"){
            alert("登陆失败");
          }
          // this.$router.replace('/HelloWorld');
          // alert(JSON.stringify(this.user))
        }).catch(err => { // 失败后的回调
          alert(err)
        })
      },
    }
  }
</script>
